<template>
  <div>
    <div class="top">
      <span class="fh"><van-icon name="arrow-left" @click="fh" /></span>
      <span>登录</span>
      <span class="zc" @click="zc">注册</span>
    </div>
    <div class="mainCenter">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="手机号/账户名/邮箱"
          :rules="[{ required: true, message: '请填写用户名' }]"
          class="yhm"
          @input="dl"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          class="yhm"
          @input="dl"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="register"
            :disabled="disabled_flag"
            >登录</van-button
          >
        </div>
        <span class="sjzc" @click="sjzc">手机快速注册</span>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      disabled_flag: true,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    fh() {
      this.$router.push("/Mine");
    },
    zc() {
      this.$router.push("/Register");
    },
    sjzc() {
      this.$router.push("/PhoneRegister");
    },
    dl() {
      if (this.username && this.password) {
        this.disabled_flag = false;
        return;
      }
      if (this.username) {
        this.disabled_flag = true;
        return;
      }
      if (this.password) {
        this.disabled_flag = true;
        return;
      }
    },
    register() {
      let loginname = this.username;
      // console.log("loginname: ", loginname);
      let password2 = this.password;
      // console.log("password2: ", password2);
      this.$service({
        url: "/api/user/login",
        method:"post",
        data: {
          loginname,
          password: password2,
        },
      })
        .then((res) => {
          console.log(res, "res111");
          if (this.$route.query.path) {
            console.log("this.$route.query.path: ", this.$route.query.path);
            // this.$router.push(this.$route.query.path);
            this.$router.push(this.$route.query.path);
          } else {
            this.$router.push("/Mine");
          }
          Toast("登陆成功")
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userid", res.data.data.userid);
          localStorage.setItem("username", this.username);
          // console.log('res.data.data.token: ', res.data.data.token);
        })
        .catch((err) => {
          console.log(err, "err");
          Toast("登陆失败")
        });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.top {
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  border-bottom: 2px solid gray;
  position: relative;
}
.fh {
  position: absolute;
  font-size: 20px;
  left: 1rem;
}
.yhm {
  height: 4rem;
  line-height: 4rem;
  margin-bottom: 1rem;
}
.zc {
  position: absolute;
  right: 0.5rem;
}
.sjzc {
  position: absolute;
  right: 0.5rem;
  color: blue;
  font-size: 10px;
}
</style>